<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            myChart: null
        }
    },
    mounted() {

        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));

        this.changeEcharts()
    },
    methods: {
        changeEcharts(type, x, y) {
            // 绘制图表
            this.myChart.setOption({
                title: {
                    text: '图表管理',
                    link: 'https://www.baidu.com',
                    textStyle: {
                        color: '#f66'
                    }
                },
                // 鼠标移入时显示的提示
                tooltip: {},
                // X 轴的内容
                xAxis: {
                    data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                // Y 轴的内容
                yAxis: {},
                series: [
                    // 数据值
                    {
                        name: '销量',
                        type: type || 'line',
                        data: y || [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        }
    },
}


</script>
<template>
    <div>
        <p>
            <el-button @click="changeEcharts('line')">折线图</el-button>
            <el-button @click="changeEcharts('bar')">柱状图</el-button>
            <el-button @click="changeEcharts('pie')">饼图</el-button>
            <el-button @click="changeEcharts('scatter')">散点图</el-button>
            <el-button
                @click="changeEcharts(null, ['手机', '电脑', '平板', '相机', '耳机', '手表'], [30000, 26000, 18000, 8888, 45000, 13000])">电子产品销售</el-button>
            <el-button
                @click="changeEcharts(null, ['🍍', '🍇', '🍎', '🍐', '🍌', '🍓'], [666, 888, 999, 111, 333, 555])">水果销售数据</el-button>
        </p>
        <div id="main"></div>
    </div>
</template>
<style lang="scss" scoped>
#main {
    height: 450px;
    /* width: 300px; */
}
</style>